<template>
	<u-popup v-model="localShowLightbox" mode="bottom" :duration="300">
		<view class="popup-content" @click.stop>
			<image :src="currentImage" class="popup-image" mode="aspectFit" />
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'ImagePopup',
		props: {
			showLightbox: {
				type: Boolean,
				default: false
			},
			currentImage: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				localShowLightbox: this.showLightbox
			}
		},
		watch: {
			showLightbox(newVal) {
				this.localShowLightbox = newVal
			},
			localShowLightbox(newVal) {
				this.$emit('update:showLightbox', newVal)
			}
		}
	}
</script>

<style scoped>
	.popup-content {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.popup-image {
		max-width: 100%;
		max-height: 100%;
	}
</style>